<template>
  <div class="deviceChangeper">
    <!-- 搜索 -->
    <div class="form_search">
      <el-form :model="formR" @submit.native.prevent>
        <el-input v-model="formR.imei" placeholder="在此输入IMEI编号进行搜索" clearable></el-input>
      </el-form>
      <el-button type="primary" slot="append" @click="condition" class="dev_search">搜索</el-button>
    </div>
    <!-- 表单列表 -->
    <div class="device-manage">
      <el-table :data="listData" stripe :header-cell-style="getRowClass" v-loading="loading">
        <el-table-column prop="num" label="序号"></el-table-column>
        <el-table-column prop="imei" label="IMEI号"></el-table-column>
        <el-table-column prop="devname" label="设备类型">
          <template slot-scope="scope">
            <div style="display: inline;" v-if="scope.row.devname =='scm'">烟感设备</div>
          </template>
        </el-table-column>
        <el-table-column prop="dev_equip_time" label="安装时间"></el-table-column>
        <el-table-column prop="areaName" label="归属"></el-table-column>
         <el-table-column label="操作">
          <template slot-scope='scope'>
            <el-button type='text' size='small' @click="handelSee(scope.row)" title="查看">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <page-list
        :size.sync="dev_pageSize"
        :total="totals"
        :current.sync="dev_currentPage"
        @change="getListData"
      ></page-list>

      <!-- Form 弹框查看 -->
      <el-dialog
        :close-on-click-modal="false"
        title="预览"
        :visible.sync="dialogTableVisible"
        :modal-append-to-body="false"
        class="dialog-see"
      >
        <el-form :model="form" @submit.native.prevent>
          <el-form-item label="设备归属人姓名：">{{form.name}}</el-form-item>
          <el-form-item label="设备归属人电话：">{{form.phone}}</el-form-item>
        </el-form>
      </el-dialog>



    </div>

  </div>

</template>

<script>
import Config from "@/config";
import PageList from "@/components/PageList";
import { mapGetters } from "vuex";
import { regionDataPlus } from 'static/js/regionData';
export default {
  name: "unsured",
  components: {
    PageList
  },
  data() {
    return {
      ops: {
        bar: {
          background: "#DDDEE0"
        }
      },
      // 查询
      formR: {},
      // 列表分页
      totals: 0,
      dev_currentPage: 1,
      dev_pageSize: 15,
      inputs: 15,
      //列表
      listData: [],
      // loading
      loading: true,
       // 查看
      dialogTableVisible: false,
      //弹框数据
      form: {},
    };
  },
  methods: {
    // 表头添加背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#f6f6f6";
      } else {
        return "";
      }
    },
    // 获取列表
    getListData() {
      var params = {};
      this.loading = true;
      // 判断登陆省市区
      if (this.district.districtType === 2) {
        params.province = this.district.districtId;
      } else if ( this.district.districtType === 3) {
        params.city = this.district.districtId;
      } else if ( this.district.districtType === 4) {
        params.district = this.district.districtId
      } else if ( this.district.districtType === 5) {
        params.street = this.district.districtId
      }
      params.imei = this.formR.imei ? this.formR.imei : undefined;
      let url = `${
        Config.DEVICE_MANAGE_URL
      }/inventory/device_uninsured?page=${this.dev_currentPage - 1}&size=${
        this.dev_pageSize
      }&devtype=nbiot&devname=scm&subtype=individual&orderby=-dev_equip_time`;

      this.$http.get(url, params).then(res => {
        // console.log(res);
        this.totals = res.allcount;
        res.array.map((item, i) => {
          if (this.dev_currentPage === 1) {
            item.num = i + 1;
          } else {
            item.num = (this.dev_currentPage - 1) * this.dev_pageSize + i + 1;
          }
          this.handleData(item);
          item.dev_equip_time = item.dev_equip_time ? item.dev_equip_time.replace("T", " ") : "";
        });
        this.listData = res.array;
        this.loading = false;
      });
    },
     /**
     * 对展示数据进行预处理
     * */
    handleData (item) {
      const province = this.getAreaObj(regionDataPlus, item.province)
      if (item.city === '419000' || item.district === '419001' || item.district === '济源市') {
        item.areaName = `${province.label}济源市`
      } else {
        const city = this.getAreaObj(province.children, item.city)
        const district = item.district ? this.getAreaObj(city.children, item.district) : {label: ''}
        // item.areaName = `${province.label}${city.label}${district.label}`
        item.areaName = `${province.label}${city.label}`
      }
    },
    /**
     * 获取区域信息
     * @param {Array} arr
     * @param {String} value
     * @return {Object} obj
     * */
    getAreaObj(arr, value) {
      return arr.find(res => res.value === value);
    },
    // 查看
    handelSee(data) {
      // console.log(data)
      // if(!data.installer_id_str){
      //   this.dialogTableVisible = true;
      //   return
      // }
      // 管理人员
      let url = `${Config.MANAGE_URL}/scm-weixin-admin/user/getById`
      let param = {
        id: data.installer_id_str
      }
      this.$http.get(url, param).then((res) => {
        // console.log(res)
          this.$nextTick(() => {
            this.form.name = res.name
            this.form.phone = res.phone
            this.dialogTableVisible = true;
          })
      }).catch(e => {
        this.dialogTableVisible = true;
      })
    },
    condition() {
      this.dev_currentPage = 1;
      this.getListData();
    }
  },
  created() {
    this.getListData();
  },
   computed: {
    ...mapGetters("user", {
      module: "dealedModule",
      user: "getUser",
      role: "getRole",
      district: "getDistrict"
    })
  }
};
</script>

<style lang='scss' >
@import "../../../../static/scss/common";
.deviceChangeper {
  width: 100%;
  height: 100%;
  // 搜索
  .form_search {
    width: 100%;
    height: 42px;
    .el-form {
      width: 500px;
      float: left;
      height: 42px;
      line-height: 42px;
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      border: 0;
      .el-input {
        .el-input__inner {
          height: 42px;
          border-radius: 0;
          border: 0;
          line-height: 42px;
        }
        .el-input__inner:hover {
          border-color: 0;
        }
      }
    }
    .dev_search {
      width: 80px;
      height: 42px;
      background: rgba(235, 56, 56, 1);
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      padding: 0;
      border-radius: 0;
      font-size: 14px;
    }
  }
  //列表
  .device-manage {
    width: 100%;
    height: auto;
    background: $white;
    margin-top: 24px;
    // 查看
    .dialog-see.el-dialog__wrapper {
      .el-dialog {
        width: 340px;
        height: 184px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
        .el-dialog__body {
          .el-form {
            .el-form-item {
              .el-form-item__label {
                line-height: 36px;
              }
              .el-form-item__content {
                line-height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

          }
        }

      }
    }
  }
}
</style>
